<template>
  <div style="margin-left: 20px;margin-top: 20px;">
    <h1>不同试验设备试验时数、天数</h1>
    <a-row justify="space-between" align="center" style="margin-bottom: 20px" :gutter="24">
      <a-col :span="6">
        <a-date-picker v-model="queryForm.startTime" placeholder="请选择开始时间" format="YYYY-MM-DD HH:mm:ss" />
      </a-col>
      <a-col :span="6">
        <a-date-picker v-model="queryForm.endTime" placeholder="请选择结束时间" format="YYYY-MM-DD HH:mm:ss" />
      </a-col>
      <a-col :span="6">
        <a-select v-model="queryForm.deviceId" :options="deviceNameList" placeholder="请选择设备" allow-clear
          style="width: 150px" @change="search" />
      </a-col>
      <a-col :span="6">
        <a-button @click="search">
          <template #icon><icon-refresh /></template>
          <template #default>查询</template>
        </a-button>
      </a-col>
    </a-row>
    <a-row justify="space-between" align="center" :gutter="24">
      <!-- <a-col :span="8">
        <a-statistic title="加班时数" :value="resData.overtimeHours" animation show-group-separator />
      </a-col> -->
      <a-col :span="8">
        <a-statistic title="试验时数" :value="resData.totalTestHours" animation show-group-separator />
      </a-col>
      <a-col :span="8">
        <a-statistic title="天数" :value="resData.workDays" animation show-group-separator />
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { type DataStatisticResp, type DeviceDataStatisticReq } from '@/apis/task'
import { dataStatisticByDeviceId } from '@/apis/task/testLog'
import { useDeviceName } from '@/hooks/app'
const { deviceNameList, getDeviceNameList } = useDeviceName()

defineOptions({ name: 'DeivceDataShow' })

// 查询表单
const queryForm = reactive<DeviceDataStatisticReq>({
  startTime: '',
  endTime: '',
  deviceId: '',
})

// 数据结果
const resData = ref<DataStatisticResp>({
  totalTestHours: '',
  overtimeHours: '',
  workDays: 0,
})

// 重置
const reset = () => {
  const now = dayjs()
  const oneWeekAgo = now.subtract(7, 'day')
  queryForm.startTime = oneWeekAgo.format('YYYY-MM-DD HH:mm:ss').toString()
  queryForm.endTime = now.format('YYYY-MM-DD HH:mm:ss').toString()
  search()
}

// 搜索
const search = async () => {
  const res = await dataStatisticByDeviceId(queryForm)
  resData.value = res.data
}

onMounted(async () => {
  if (!deviceNameList.value.length) {
    await getDeviceNameList()
  }
  reset()
})
</script>

<style scoped lang="less"></style>